<template>
  <div class="home">
    <h1>1111</h1>
    <button @click="is = true">添加</button>
    <HelloWorld v-show="is" @show="fn" @not="apply" />
    <ul>
      <li v-for="item in arr" :key="item.id"><h5>{{ item.want }}</h5>
      <p>{{ item.content }}</p><button @click="del(item.id)">删除</button>
    <hr></li>
    </ul>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  data() {
    return {
      is: false,
      arr:[],
      autoID:0
    };
  },
  mounted() {},
  methods: {
    fn(a,b,c) {
      this.is = a;
      this.arr.push({
        id:this.autoID,
        want:b,
        content:c
      })
      this.autoID++
    },
    del(id){
        var index = this.arr.findIndex(item=>item.id==id)
        this.arr.splice(index,1)
    },
    apply(a){
      this.is=a
    }
  },
  components: {
    HelloWorld,
  },
};
</script>
<style lang='less' scoped>
li{
  margin: 10px;
  padding: 10px;
}
</style>